<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>智慧蓝波湾小区</title>
    <script src="js/jquery-3.5.0.min.js"></script>
    <link rel="stylesheet" href="css/shouye.css">
    <style>
       .s{
           display: none;
       }
       a{
           font-family: 宋体;
       }
        a:link { color: black; text-decoration: none; }
        #video{
            background-color: azure;
            width:1130px;
            height: 500px;
            position: absolute;
            margin-left: -400px;
            margin-top: -170px;
        }

        .video_back {

            /*生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。可以根据实际情况修改*/
            position: absolute;
            width: 100%;
            height: 100%;
            /*将视频放在元素的堆叠顺序最底层，以防覆盖其他东西*/


        }
        #wenzi{
            color: cornflowerblue;
            margin-left: 300px;
            margin-top: -60px;
            font-family: 宋体;
            font-size: 30px;
        }

    </style>
</head>

<body>

<nav>
    <img src="img/菜单栏背景图.jpg" style="width: 468px;height: 1000px;margin-left: -100px;margin-top:-100px; ">
    <ul class="menus">

        <li class="li" onclick="toggleMenu(this)"> <!-- Add onclick event -->
            <span class="icon">
                    <img src="img/精品公寓.png" style="width: 50px;height: 50px; ">
              </span>
            <a href="#shou" style=" color: cornflowerblue"><h1>智慧蓝波湾小区</h1></a>
        </li>


        <!--        1.智慧快递系统-->
        <li class="li" onclick="toggleMenu(this)"> <!-- Add onclick event -->
            <span class="icon">
                    <img src="img/快递包裹,箱子.png" class="p">
              </span>
            <a>智慧快递</a>
            <ul>
                <a>返回</a>
                <li><a href="#system11">页面一</a></li>
                <li><a href="#system12">页面二</a></li>
                <li><a href="#system13">页面三</a></li>
            </ul>
        </li>

        <!--        2.流浪动物系统-->
        <li class="li" onclick="toggleMenu(this)">
            <span class="icon">
                    <img src="img/流浪动物.png" class="p">
              </span>
            <a>流浪动物</a>
            <ul>
                <li><a>返回</a></li>
                <li><a href="#system21">页面一</a></li>
                <li><a href="#system22">页面二</a></li>

            </ul>
        </li>


        <!--        3.车库系统-->
        <li class="li" onclick="toggleMenu(this)">
            <span class="icon">
                    <img src="img/车库.png" class="p">
              </span>
            <a>智慧车库</a>
            <ul>
                <li><a>返回</a></li>
                <li><a href="#system31">页面一</a></li>
                <li><a href="#system32">页面二</a></li>

            </ul>
        </li>


        <!--        4.门禁系统-->
        <li class="li" onclick="toggleMenu(this)">
            <span class="icon">
                    <img src="img/门禁设备.png" class="p">
              </span>
            <a>智慧门禁</a>
            <ul>
                <li><a>返回</a></li>
                <li><a href="#system41">页面一</a></li>
                <li><a href="#system42">页面二</a></li>
            </ul>
        </li>


        <!--        5.金融服务在线支付系统-->
        <li class="li" onclick="toggleMenu(this)">
            <span class="icon">
                    <img src="img/在线支付.png" class="p">
              </span>
            <a>金融服务在线支付</a>
            <ul>
                <li><a>返回</a></li>
                <li><a href="#system51">页面一</a></li>
                <li><a href="#system52">页面二</a></li>
            </ul>
        </li>

        <!--        6.后勤保障系统-->
        <li class="li" onclick="toggleMenu(this)">
            <span class="icon">
                    <img src="img/后勤保障.png" class="p">
              </span>
            <a>智慧后勤保障</a>
            <ul>
                <li><a>返回</a></li>
                <<li><a href="#system61">页面一</a></li>
                <li><a href="#system62">页面二</a></li>
            </ul>
        </li>

        <!--        7.智慧居民健康系统-->
        <li class="li" onclick="toggleMenu(this)">
            <span class="icon">
                    <img src="img/居民健康卡.png" class="p">
              </span>
            <a>智慧居民健康</a>
            <ul>
                <li><a>返回</a></li>
                <li><a href="#system71">页面一</a></li>
                <li><a href="#system72">页面二</a></li>
            </ul>
        </li>

        <!--        8.垃圾分类系统-->
        <li class="li" onclick="toggleMenu(this)">
            <span class="icon">
                    <img src="img/垃圾分类.png" class="p">
              </span>
            <a>智慧垃圾分类</a>
            <ul>
                <li><a>返回</a></li>
                <li><a href="#system81">页面一</a></li>
                <li><a href="#system82">页面二</a></li>
            </ul>
        </li>
    </ul>
</nav>
<main>
    <section id="shou" style="margin-right: -900px">
        <div style=";position: absolute;height:60px;width: 1100px;margin-top: -250px;margin-left: -400px">
            <ul>
                <li id="wenzi"><h1>欢迎来到智慧蓝波湾小区</h1></li>
            </ul>
        </div>
        <div id="video">
            <video class="video_back" autoplay muted loop x5-video-player-fullscreen="true" x5-playsinline width="100%" height="100%">
                <source src="https://ufang-assets.oss-cn-hangzhou.aliyuncs.com/officialWeb/video/f91c2e5057ed4f36a6e36540bd0c1582.mp4">
            </video>

        </div>

    </section>

    <!--        1.智慧快递系统-->
<!--    页面一-->
    <section id="system11" style="margin-right: -900px" class="s"></section>
<!--    页面二-->
    <section id="system12" style="margin-right: -900px" class="s"></section>
    <section id="system13" style="margin-right: -900px" class="s"></section>

    <!--        2.流浪动物系统-->
<!--    页面一-->
    <section id="system21" style="margin-right: -900px" class="s"></section>
<!--    页面二-->
    <section id="system22" style="margin-right: -900px" class="s"></section>


    <!--       3.车库系统-->
<!--    页面一-->
    <section id="system31" style="margin-right: -900px" class="s"></section>
<!--    页面二-->
    <section id="system32" style="margin-right: -900px" class="s" ></section>



    <!--        4.门禁系统系统-->
<!--    页面一-->
    <section id="system41" style="margin-right: -900px" class="s" ></section>
<!--    页面二-->
    <section id="system42" style="margin-right: -900px" class="s"></section>

    <!--        5.金融服务在线支付系统-->
<!--    页面一-->
    <section id="system51" style="margin-right: -900px" class="s"></section>
<!--    页面二-->
    <section id="system52" style="margin-right: -900px" class="s"></section>

    <!--        6.后勤保障系统-->
<!--    页面一-->
    <section id="system61" style="margin-right: -900px" class="s"></section>
<!--    页面二-->
    <section id="system62" style="margin-right: -900px" class="s"></section>

    <!--        7.智能居民健康系统-->
<!--    页面一-->
    <section id="system71" style="margin-right: -900px" class="s"></section>
<!--    页面二-->
    <section id="system72" style="margin-right: -900px" class="s"></section>

    <!--        8.垃圾分类系统-->
<!--    页面一-->
    <section id="system81" style="margin-right: -900px" class="s"></section>
<!--    页面二-->
    <section id="system82" style="margin-right: -900px" class="s"></section>
</main>
<script>
    //使用api接口向section插入页面
    // 使用fetch API请求数据

    <!--        1.智慧快递系统-->
    //切换页面一：
    const apiUrl11 = 'http://localhost:8080/html/1.html';
    fetch(apiUrl11)
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.text(); // 或者 response.json() 根据API返回的数据类型
        })
        .then(data => {
            document.getElementById('system11').innerHTML = data;
        })

    //切换页面二：
    const apiUrl12 = 'http://localhost:8080/html/1.html';
    fetch(apiUrl12)
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.text(); // 或者 response.json() 根据API返回的数据类型
        })
        .then(data => {
            document.getElementById('system12').innerHTML = data;
        })
    //切换页面三：
    const apiUrl13 = 'http://localhost:8080/html/1.html';
    fetch(apiUrl13)
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.text(); // 或者 response.json() 根据API返回的数据类型
        })
        .then(data => {
            document.getElementById('system13').innerHTML = data;
        })

    // <!--        2.流浪动物系统-->
    //切换页面一：
    const apiUrl21 = 'http://localhost:8080/html/1.html';
    fetch(apiUrl21)
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.text(); // 或者 response.json() 根据API返回的数据类型
        })
        .then(data => {
            document.getElementById('system21').innerHTML = data;
        })
    //切换页面二：
    const apiUrl22 = 'http://localhost:8080/html/1.html';
    fetch(apiUrl22)
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.text(); // 或者 response.json() 根据API返回的数据类型
        })
        .then(data => {
            document.getElementById('system22').innerHTML = data;
        })


    // <!--        3.车库系统系统-->
    //切换页面一：
    const apiUrl31 = 'http://localhost:8080/html/1.html';
    fetch(apiUrl31)
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.text(); // 或者 response.json() 根据API返回的数据类型
        })
        .then(data => {
            document.getElementById('system31').innerHTML = data;
        })
    //切换页面二：
    const apiUrl32 = 'http://localhost:8080/html/1.html';
    fetch(apiUrl32)
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.text(); // 或者 response.json() 根据API返回的数据类型
        })
        .then(data => {
            document.getElementById('system32').innerHTML = data;
        })

    // <!--        4.门禁系统-->
    //切换页面一：
    const apiUrl41 = 'http://localhost:8080/html/1.html';
    fetch(apiUrl41)
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.text(); // 或者 response.json() 根据API返回的数据类型
        })
        .then(data => {
            document.getElementById('system41').innerHTML = data;
        })
    //切换页面二：
    const apiUrl42 = 'http://localhost:8080/html/1.html';
    fetch(apiUrl42)
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.text(); // 或者 response.json() 根据API返回的数据类型
        })
        .then(data => {
            document.getElementById('system42').innerHTML = data;
        })

    // <!--        5.金融服务在线支付系统-->
    //切换页面一：
    const apiUrl51 = 'http://localhost:8080/html/1.html';
    fetch(apiUrl51)
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.text(); // 或者 response.json() 根据API返回的数据类型
        })
        .then(data => {
            document.getElementById('system51').innerHTML = data;
        })
    //切换页面二：
    const apiUrl52 = 'http://localhost:8080/html/1.html';
    fetch(apiUrl52)
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.text(); // 或者 response.json() 根据API返回的数据类型
        })
        .then(data => {
            document.getElementById('system52').innerHTML = data;
        })

    // <!--        6.后勤保障系统-->
    //切换页面一：
    const apiUrl61 = 'http://localhost:8080/html/1.html';
    fetch(apiUrl61)
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.text(); // 或者 response.json() 根据API返回的数据类型
        })
        .then(data => {
            document.getElementById('system61').innerHTML = data;
        })
    //切换页面二：
    const apiUrl62 = 'http://localhost:8080/html/1.html';
    fetch(apiUrl62)
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.text(); // 或者 response.json() 根据API返回的数据类型
        })
        .then(data => {
            document.getElementById('system62').innerHTML = data;
        })

    // <!--        7.智能居民健康管理系统-->
    //切换页面一：
    const apiUrl71 = 'http://localhost:8080/html/1.html';
    fetch(apiUrl71)
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.text(); // 或者 response.json() 根据API返回的数据类型
        })
        .then(data => {
            document.getElementById('system71').innerHTML = data;
        })
    //切换页面二：
    const apiUrl72 = 'http://localhost:8080/html/1.html';
    fetch(apiUrl72)
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.text(); // 或者 response.json() 根据API返回的数据类型
        })
        .then(data => {
            document.getElementById('system72').innerHTML = data;
        })

    // <!--        8.垃圾分类系统-->
    //切换页面一：
    const apiUrl81 = 'http://localhost:8080/html/1.html';
    fetch(apiUrl81)
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.text(); // 或者 response.json() 根据API返回的数据类型
        })
        .then(data => {
            document.getElementById('system81').innerHTML = data;
        })
    //切换页面二：
    const apiUrl82 = 'http://localhost:8080/html/1.html';
    fetch(apiUrl82)
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.text(); // 或者 response.json() 根据API返回的数据类型
        })
        .then(data => {
            document.getElementById('system82').innerHTML = data;
        })




    //点击移动
    function toggleMenu(element) {
        element.classList.toggle('active'); // Toggle the active class on click
    }
    //动态滑动
    document.querySelectorAll('nav a').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault(); // 阻止默认的锚点跳转行为
            const targetId = this.getAttribute('href');
            document.querySelectorAll('section').forEach(section => {
                section.style.display = 'none'; // 隐藏所有section
            });
            document.querySelector(targetId).style.display = 'block'; // 显示目标section
            document.querySelector(targetId).scrollIntoView({
                behavior: 'smooth' // 平滑滚动效果
            });
        });
    });
</script>
</body>
</html>
